<template>
    <div class="table">
        <!--给表格添加一个id，导出文件事件需要使用-->
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                id="out-table"
        >
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
            >
            </el-table-column>
        </el-table>
        <!--给按钮绑定事件-->
        <button @click="exportExcel">点击导出</button>
    </div>
</template>

<script>
    // 引入导出Excel表格依赖
    import d from "../../utils/data2excel"

    export default {
        name: "finance",
        data() {
            return {
                tableData: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄"
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄"
                    }
                ]
            };
        },
        mounted() {},
        methods: {
            //定义导出Excel表格事件
            exportExcel() {
               d('#out-table','吴昌述')
            }
        }
    };
</script>

<style scoped>
    .table {
        width: 100%;
        height: 300px;
    }
</style>
